@section('title', '菜单列表')
@section('header')
<div class="layui-inline">
    <button class="layui-btn layui-btn-small layui-btn-normal addBtn" data-desc="添加菜单" data-url="{{url('/amenue/0')}}"><i class="layui-icon">&#xe654;</i></button>
    <button class="layui-btn layui-btn-small layui-btn-warm freshBtn"><i class="layui-icon">&#x1002;</i></button>
    <div class="layui-btn layui-btn-small layui-btn-normal zkBtn" data-title="展开菜单"><i class="layui-icon">&#xe602;</i></div>
</div>
@endsection
@section('table')
<table class="layui-table" lay-skin="line">
    <colgroup>
        <col width="50">
        <col class="hidden-xs" width="50">
        <col class="hidden-xs" width="100">
        <col class="hidden-xs" width="100">
        <col>
        <col width="130">
    </colgroup>
    <thead>
    <tr>
        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
        <th class="hidden-xs">ID</th>
        <th class="hidden-xs">排序</th>
        <th class="hidden-xs">应用</th>
        <th>菜单名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    @foreach($menus as $branch)
    <tr id='node-{{$branch['menu_id']}}' class="parent collapsed">
    <td><input type="checkbox" name="" lay-skin="primary" data-id="{{$branch['menu_id']}}"></td>
    <td class="hidden-xs">{{$branch['menu_id']}}</td>
    <td class="hidden-xs"><input type="number" name="title" autocomplete="off" class="layui-input"  data-id="{{$branch['menu_id']}}" onchange="changeSort('menus',this)"></td>
    <td class="hidden-xs">Admin</td>
    <td>{{$branch['name']}}
        <a class="layui-btn layui-btn-mini layui-btn-normal showSubBtn" data-id='{{$branch['menu_id']}}'>+</a>
    </td>
    <td>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-small layui-btn-normal  edit-btn" data-id="{{$branch['menu_id']}}" data-desc="修改菜单" data-url="{{url('/amenue/'.$branch['menu_id'])}}"><i class="layui-icon">&#xe642;</i></button>
            <button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="{{$branch['menu_id']}}" data-url="{{url('/amenu/'.$branch['menu_id'])}}"><i class="layui-icon">&#xe640;</i></button>
        </div>
    </td>
    </tr>
    @if(isset($branch['children']))
    @foreach ($branch['children'] as $child_branch)
    <tr id='node-{{$branch['menu_id']}}' class="child-node-{{$branch['menu_id']}} parent collapsed" style="display:none ;" parentid="{{$branch['menu_id']}}">
    <td><input type="checkbox" name="" lay-skin="primary" data-id="{{$child_branch['menu_id']}}"></td>
    <td class="hidden-xs">{{$child_branch['menu_id']}}</td>
    <td class="hidden-xs"><input type="text" name="title" autocomplete="off" class="layui-input"  data-id="{{$child_branch['menu_id']}}" data-url="{{url('/sort')}}" onchange="changeSort('menus',this)"></td>
    <td class="hidden-xs">后台</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─{{$child_branch['name']}}</td>
    <td>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-small layui-btn-normal edit-btn" data-id="{{$child_branch['menu_id']}}"  data-desc="修改菜单" data-url="{{url('/amenue/'.$child_branch['menu_id'])}}"><i class="layui-icon">&#xe642;</i></button>
            <button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="{{$child_branch['menu_id']}}" data-url="{{url('/amenu/'.$branch['menu_id'])}}"><i class="layui-icon">&#xe640;</i></button>
        </div>
    </td>
    </tr>
    @endforeach
    @endif
    @endforeach
    </tbody>
</table>
@endsection
@section('js')
<script>
    layui.use(['jquery'], function() {
        var $=layui.jquery;
        //栏目展示隐藏
        $('.showSubBtn').on('click', function() {
            var _this = $(this);
            var id = _this.attr('data-id');
            var parent = _this.parents('.parent');
            var child = $('.child-node-' + id);
            var childAll = $('tr[parentid=' + id + ']');
            if(parent.hasClass('collapsed')) {
                _this.html('-');
                parent.addClass('expanded').removeClass('collapsed');
                child.css('display', '');
            } else {
                _this.html('+');
                parent.addClass('collapsed').removeClass('expanded');
                child.css('display', 'none');
                childAll.addClass('collapsed').removeClass('expanded').css('display', 'none');
                childAll.find('.showSubBtn').html('+');
            }
        });
        $('.zkBtn').click(function() {
            if($(this).attr('data-title')=='展开菜单'){
                $(this).attr('data-title','收缩菜单');
                $(this).html('<i class="layui-icon">&#xe61a;</i>');
                $('.showSubBtn').html('-');
                $('tr').css('display','');
            }else{
                $(this).attr('data-title','展开菜单');
                $(this).html('<i class="layui-icon">&#xe602;</i>');
                $('.showSubBtn').html('+');
                $("[parentid]").css('display','none');
            }
        }).mouseenter(function() {
            layer.tips($(this).attr('data-title'), $(this),{tips: [3, '#40455C']});
        })
    });
</script>
@endsection
@extends('common.list')
